<template>
	<view class="chart-cont">
		<l-echart class="chart" ref="chartRef" :customStyle="customStyle"></l-echart>
	</view>
</template>
<script setup lang="ts">
	import { ref, reactive, onMounted, watch } from 'vue';
	const echarts = require('../../../uni_modules/lime-echart/static/echarts.min');
	const props = defineProps({
		chartData: Array,
		settingData: Array,
		isSwitch: Boolean,
		chartTitle: String,
	});
	const chartRef = ref(null);
	const myChart = ref(null);
	const xData = ref([]);
	const yData = ref([]);
	const customStyle = ref({
		height: "200px"
	});
	const option = reactive({
		graphic: {
			type: 'text',
			left: 'center',
			top: 'middle',
			invisible: yData.value.length > 0, // 有数据时隐藏提示
			style: {
				text: '暂无相关数据',
				fontSize: 15,
				fill: '#999'
			}
		},
		legend: {
			show: false
		},
		tooltip: {
			trigger: 'item',
			position: ["40%", "10%"],
			// formatter: function (params) {
			// 	console.log('params', params)
			// 	return params.marker + convertTime(params.value[0]) +"："+ params.value[1];
			// }
		},
		grid: {
			top: 10,
			left: 20,
			right: 20,
			bottom: 20,
			containLabel: true,
		},
		xAxis: {
			type: 'value',
			axisTick: {
				show: false,
			},
			axisLine: {
				lineStyle: {
					color: "#e1e1e1"
				}
			},
			axisLabel: {
				color: "#999",
				formatter: function (value, index, extra ?) {
					return convertTime(value);
				}
			},
			splitLine: {
				lineStyle: {
					color: "#e1e1e1"
				}
			},
			// data: xData.value,
		}
		,
		yAxis: {
			type: 'value',
			// splitNumber: props.isSwitch ? 1 : 5,
			axisLabel: {
				color: "#999",
				formatter: function (value, index, extra ?) {
					if (props.isSwitch) {
						return value == 1 ? '开' : '关';
					} else {
						return value;
					}
				}
			},
		}
		,
		series: []
	});

	const seriesItem = {
		name: '冷间温度',
		type: 'line',
		smooth: true,
		showSymbol: true,
		symbolSize: 6,
		tooltip: {
			valueFormatter: function (value) {
				if (props.isSwitch) {
					return value == 1 ? '开' : '关';
				} else {
					return value + ' °C';
				};
			}
		},
		itemStyle: {
			color: "#1DE8E0"
		},
		lineStyle: {
			color: "#1DE8E0"
		},
		data: [],
	}

	// 时间戳转换
	function convertTime(time : number) {

		const days = Math.floor(time / (24 * 3600));
		const hours = Math.floor((time % (24 * 3600)) / 3600);
		const minutes = Math.floor((time % 3600) / 60);
		const secs = Math.floor(time % 60);
		let str = "";
		// if (days) {
		// 	str += `${days}:`;
		// }
		if (hours) {
			str += `${hours}:`;
		}
		if (minutes) {
			str += `${minutes}`;
		}else{
			str += `00`;
		}
		// str += `${secs}`;
		return str;
	}


	watch(() => props.chartData, () => {
		setTimeout(() => {
			initChart();
		}, 500)
	});

	watch(() => props.settingData, () => {
		setTimeout(() => {
			initChart();
		}, 500)
	});

	onMounted(() => {
		// 组件能被调用必须是组件的节点已经被渲染到页面上
		setTimeout(() => {
			// initChart();
		}, 1000)
	});

	async function initChart() {
		// xData.value = [];
		// yData.value = [];

		option.series = [];
		console.log("props.settingData ", props.settingData)
		if (props.settingData && props.settingData.length) {

			for (var index = 0; index < props.settingData.length; index++) {
				var seriesItem = {
					name: '冷间温度',
					type: 'line',
					smooth: true,
					showSymbol: true,
					symbolSize: 6,
					tooltip: {
						valueFormatter: function (value) {
							if (props.isSwitch) {
								return value == 1 ? '开' : '关';
							} else {
								return value + ' °C';
							};
						}
					},
					itemStyle: {
						color: "#1DE8E0"
					},
					lineStyle: {
						color: "#1DE8E0"
					},
					data: [],
				};
				// 数据格式：使用二维数组，子数组为[x值, y值]
				seriesItem.data.push([Number(props.settingData[index].starttime.split(":")[0] * 60 + props.settingData[index].starttime.split(":")[1]), props.settingData[index].startvalue])
				seriesItem.data.push([Number(props.settingData[index].endtime.split(":")[0] * 60 + props.settingData[index].endtime.split(":")[1]), props.settingData[index].endvalue])

				seriesItem.name = props.chartTitle || "温度";
				option.series.push(seriesItem);
			}
		}

		console.log("option.series ", option.series)
		if (option.series.length > 0) {
			option.graphic.invisible = true;
		} else {
			option.graphic.invisible = false;
		}
		if (!chartRef.value) return
		const chart = await chartRef.value.init(echarts)
		chart.setOption(option)
		myChart.value = chart;
	}
</script>
<style lang="scss" scoped>
	.chart-cont {
		position: relative;
		width: 100%;
		height: 100%;

		.chart {
			width: 100%;
			height: 100% !important;
		}
	}
</style>